<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class语法</title>
  </head>
  <body>
    <!--  
      除了JS语言之外, 其他编程语言 以JAVA为首, 都采用的是 class 语法来管理对象相关的操作
      JS独创了原型设计

      呼声: 从其他语言中转型到JS语言的程序员, 希望JS能引入class语法来管理对象
      JS 在ES6的新特性中增加了 class 语法
    -->

    <script>
      // 复习: JS的原型写法
      function Test(a, b) {
        // let this = {}
        this.a = a
        this.b = b
        // this.__proto__ = Test.prototype
        // return this
      }
      //
      Object.defineProperty(Test.prototype, 'show', {
        value: function () {
          console.log('我是show')
        },
      })

      var a = new Test(10, 20)
      console.log(a)

      ///////////////////////////////////////
      // class语法
      // class中: 同时封装了构造函数 和 原型的方法
      class Demo {
        // 固定名称的属性: constructor
        // new运算符, new Demo() 就会触发此固定名称的方法
        constructor(a, b) {
          this.a = a
          this.b = b
        }

        // class语法中: 相关的原型方法直接写到此处即可
        // 省略 function 前缀
        show() {
          console.log('我是show')
        }
        // 从其他语言转入的人: 都排斥 构造函数.prototype 的语法

        talk() {}
        ab() {}
        cc() {}
      }

      // 可以认为: class语法 就是 原型写法的 语法糖

      var d = new Demo(10, 20)
      console.log(d)
      // d.show: d中没有show, 则到原型中查找使用
      d.show()
    </script>
  </body>
</html>
